<template>
    <div ref="mapRef" style="height: 370px;width: 85%; margin: 0 auto;" />
</template>

<script setup lang="ts">
import { load } from '@amap/amap-jsapi-loader'
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'

const mapRef = ref() // 对应地图渲染的 ref 元素 <div ref="mapRef" />
const mapApiKey = reactive({
    securityJsCode: '582c16688405bd7ae1b0ab34478efea6', // 注意如果需要 2.0 mapApiKey.securityJsCode 必填
    key: '731417e7a8bfd002ed5fcdd14de18382' // 申请好的Web端开发者Key，首次调用 load 时必填
})
let map: any = null
let marker: any = null;

const initMapView = async () => {
    try {
        window._AMapSecurityConfig = {
            securityJsCode: mapApiKey.securityJsCode,
        }
        map = await load({
            key: mapApiKey.key,
            version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.Scale'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        });
        let mymap = new map.Map(mapRef.value, {
            viewMode: '2D', // 是否为3D地图模式
            zoom: 3, // 初始化地图级别
            center: [106.604308, 29.531952],
            resizeEnable: true
        })

        let { data } = await axios.get("/api/map.json");

        console.log(data)

        data.forEach((item: any) => {
            item.children.forEach((it: any) => {
                marker = new map.Marker({
                    position: it.value,
                    // offset: new map.Pixel(-13, -26),
                });
                mymap.add(marker);
            })
        })
    } catch (error) {
        console.log(error)
    }
}

onMounted(() => {
    initMapView()
})
</script>

<style scoped></style>
